現在智慧電視越來越普遍
封面圖是智慧電視的作業系統UI
標題說的機上盒
英文是 set-top box (STB)
=>可理解成它是一台小小電腦(普遍都是安裝類似 Android 的作業系統)
可以安裝 Netflix, 愛奇藝, Disney+, Youtube ...etc 看影片的應用程式
在上面都是使用遙控器來操作UI,和一般網頁操作邏輯差很多的!
基本上不太會看到需要填表單的功能(試想在一個沒有語音功能的遙控器上填寫資料...)
今天來做2個demo
demo1 電腦網頁用方向鍵控制UI
可以看到下圖有兩個框框
//認識基本規則
1.對網頁按下 tab 鍵 => 抓取第一個DOM => 出現focus效果
2.遙控器方向鍵
- 右: 相當於按下 `tab` => 抓同列的下個DOM => 出現focus效果
- 左: 相當於按下 `shift` + `tab` => 抓同列的上個DOM => 出現focus效果
- 下: 抓下一列DOM的第一個 => 出現focus效果
- 上: 抓上一列DOM的第一個 => 出現focus效果
改顏色只要規範好focus
的border即可產生效果
button:focus {
border: 10px solid rgb(255, 153, 0);
}
currentFocusIndex
紀錄當前 位置在哪keydown
事件監聽鍵盤,處理方式如下focused
上下左右
時算出currentFocusIndex
,改值focused
buttons[currentFocusIndex].classList.add("focused");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>TV</title>
<style>
.focusable-button {
padding: 70px;
margin: 15px;
background-color: #333;
color: #fff;
border: 2px solid transparent;
font-size: 10rem;
border: 10px solid #ffffff;
}
.focusable-button.focused {
border: 10px solid #f00;
}
</style>
</head>
<body>
<h2>方向鍵選擇 DOM</h2>
<pre>
請用電腦版測試,按下鍵盤方向鍵
</pre>
<button class="focusable-button" onclick="alert(1)">1</button>
<button class="focusable-button" onclick="alert(2)">2</button>
<button class="focusable-button" onclick="alert(3)">3</button>
<br />
<button class="focusable-button" onclick="alert(4)">4</button>
<button class="focusable-button" onclick="alert(5)">5</button>
<button class="focusable-button" onclick="alert(6)">6</button>
<script>
let currentFocusIndex = 0;
const buttons = document.querySelectorAll(".focusable-button");
main();
function main() {
document.addEventListener("keydown", function (event) {
switch (event.key) {
case "ArrowUp":
// 處理上方向鍵的邏輯
moveFocus("up");
break;
case "ArrowDown":
// 處理下方向鍵的邏輯
moveFocus("down");
break;
case "ArrowLeft":
// 處理左方向鍵的邏輯
moveFocus("left");
break;
case "ArrowRight":
// 處理右方向鍵的邏輯
moveFocus("right");
break;
case "Enter":
// 處理確認鍵邏輯 (選中當前焦點元素)
activateButton();
break;
}
});
}
function moveFocus(direction) {
buttons[currentFocusIndex].classList.remove("focused");
switch (direction) {
case "up":
if (currentFocusIndex >= 3 && currentFocusIndex <= 5) {
currentFocusIndex -= 3;
}
break;
case "down":
if (currentFocusIndex <= 2 && currentFocusIndex >= 0) {
currentFocusIndex += 3;
}
break;
case "left":
currentFocusIndex = Math.max(currentFocusIndex - 1, 0);
break;
case "right":
currentFocusIndex = Math.min(
currentFocusIndex + 1,
buttons.length - 1
);
break;
}
buttons[currentFocusIndex].classList.add("focused");
}
function activateButton() {
buttons[currentFocusIndex].click();
}
</script>
</body>
</html>